<template>
  <div style="margin:20px;padding-top: 10px" class="workLine" >
    <el-table
      :data="tableData"
      @cell-click="cellClick"
      border
      style="width: 100%">
      <el-table-column
        prop="workLineName"
        label="线别"
        width="180">
        <template slot-scope="scope">
          <span>{{scope.row['workLineName']|getValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="targetOutput"
        label="计划产量"
        width="180">
        <template slot-scope="scope">
          <input class="el-input__inner" @blur="hideEdit(scope,'targetOutput')" v-show="inputShow(scope,'targetOutput')" :value="getInputValue(scope.row['targetOutput'])"  @input="inputWork($event,scope,'targetOutput')"></input>
          <span v-show="!inputShow(scope,'targetOutput')">{{scope.row['targetOutput']|getValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="planUserCount"
        label="计划出勤">
        <template slot-scope="scope">
          <input  class="el-input__inner" @blur="hideEdit(scope,'planUserCount')"  :value="getInputValue(scope.row['planUserCount'])"  @input="inputWork($event,scope,'planUserCount')" v-show="inputShow(scope,'planUserCount')"></input>
          <span v-show="!inputShow(scope,'planUserCount')">{{scope.row['planUserCount'] |getValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="actualUserCount"
        label="实际出勤">
        <template slot-scope="scope">
          <input  class="el-input__inner"  @blur="hideEdit(scope,'actualUserCount')"   :value="getInputValue(scope.row['actualUserCount'])"  @input="inputWork($event,scope,'actualUserCount')" v-show="inputShow(scope,'actualUserCount')"></input>
          <span v-show="!inputShow(scope,'actualUserCount')">{{scope.row['actualUserCount'] |getValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="muPlan"
        label="目标MU">
        <template slot-scope="scope">
          <input  class="el-input__inner"  @blur="hideEdit(scope,'muPlan')" :value="getInputValue(scope.row['muPlan'])"  @input="inputWork($event,scope,'muPlan')" v-show="inputShow(scope,'muPlan')"></input>
          <span v-show="!inputShow(scope,'muPlan')">{{scope.row['muPlan'] |getValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="targetEfficiency"
        label="目标生产效率">
        <template slot-scope="scope">
          <span >{{scope.row['targetEfficiency']|getValue }}</span>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>
<script>
  import { getToken } from '@/utils/auth' // 验权
  export default {
    nameL:'setTime',
    props:['startProduce','workList'],
    data(){
      return{
        tableData: []
      }
    },
    mounted(){
      let self = this;
      let work = self.$store.state.userInfo.works;
      self.workId = work.workId;
      self.$eventBus.$on("disAllWorkLineEdit",function () {
        self.disAllEdit();
      })
    },

    filters:{
      getValue(val){
        let filterVal = val?val.value:"";
        return filterVal;
      }
    },

    methods:{
      getInputValue(val){
        let filterVal = val?val.value:"";
        return filterVal;
      },

      getApiTableData(){
        return this.tableData;
      },

      handleTableData(result){
        for(let data of result){
          for(let key in data){
            let value = data[key];
            data[key] = {value:value,edit:false};
          }
        }
      },

      inputShow(scope,attr){
        let show = false;
        let value = scope.row[attr];
        show = value?value['edit']:show;
        return show;
      },

      hideEdit(scope,attr){
        scope.row[attr]['edit'] = false;
        this.insertWorkLine(scope.row,attr);
      },

      insertWorkLine(row,attr) {
        debugger
        let self = this;
        let work = self.$store.state.userInfo.works;
        let id = row.id?row.id.value:"";
        let param = {};
        param[attr] = row[attr].value;
        param["workLineId"] = row["workLineId"].value;
        param["id"] = id;
        param["workId"] = work.workId;
        self.$http({
          url: "/autoMonitor/workLine/updateLineDetail",
          method: "post",
          params:param,
        }).then(resp => {
           if(resp.success && id==""){
             self.$emit("refreshWorkLine");
           }
        });
      },

      inputWork(e,scope,attr){
        scope.row[attr].value = e.target.value;
      },

      cellClick(row, column, cell, event){
        if(!this.startProduce){
          let property = column.property;
          row[property].edit = true;
        }
      },
      disAllEdit(){
        for(let data of this.tableData){
          for(let key in data){
            data[key].edit = false;
          }
        }
      }
    },
    watch:{
      workList(val){
        this.tableData = val;
      }
    }
  }
</script>
<style>
  .el-table td, .el-table th.is-leaf{
    background: rgb(242, 242, 242);
    text-align: center;
    border-bottom: 1px solid #ffffff;
  }

  .workLine .el-table td{
    cursor: pointer;
  }

  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #ffffff;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: auto;
  }
  .el-input__inner{
    height:30px
  }
</style>
